<template>
  <ul class = "row-container" style = "flex-wrap: wrap;justify-content: space-between">
    <li class = "row-container al-center collector-item" v-for = "item in 8" :key = "item">
      <router-link to = "/">
        <el-avatar :size = "120" :src = "logo" />
      </router-link>
      <div class = "column-container jc-center collector-info">
        <router-link to = "/">你的名字</router-link>
        <span>你的简介？</span>
      </div>
    </li>
  </ul>
  <div class = "row-center-container">
    <el-pagination
        style = "margin: 0 auto"
        v-model:currentPage = "currentPage"
        :page-size = "100"
        :total = "1000"
        :small = "false"
        layout = " prev, pager, next"
        @current-change = "handleCurrentChange"
    />
  </div>

</template>

<script setup>
import logo from "@/assets/logo.png";


//分页器数据
import {ref} from "vue";

let currentPage = ref(1)
const handleCurrentChange = (val) => {
  currentPage = val
}
</script>

<style lang = "less" scoped>
.collector-item {
  padding: 10px 0;
  flex: 0 0 40%;

  .collector-info {
    padding: 0 10px;

    a {
      font-size: 20px;
      padding: 5px 0;
    }

    span {
      font-size: 16px;
    }
  }
}

</style>